<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{
        margin: 0;
    }
    header{
        height: 700px;
        background-image:url(3.jpg);
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}
button{position: relative;
    top:100px;
    width:250px;
    height:60px;
    background-color: transparent;
    color:black;
    font-size: 24px;
    borde:1px solid #fff;
    outline:none;
    border-radius: 10px;
    cursor: pointer;
   }
   button:hover
   { background-color:gray;
    color:45b2eb;}
    div{
     height:300px;
     display: flex;
     align-items: center;
     justify-content: center;
    }
    span{
        font-size: 64px;
        color: pink;
    }
    article{
        height: 600px;
        background-image: url(5.jpg);
        background-attachment: fixed;
    }
    main{
        height: 580px;
        position: relative;
    }
    main>img{
position: absolute;
bottom: 0;
left: 180px
    }
    main>aside{
        width: 500px;
        position: absolute;
        top: 100px;
        right: 200px;
        text-align: right;
    }
    aside>h1{
        font-size: 50px;
    }
    aside>p{
        font-size: 20px;
        color: #555;
    }
    aside>p>a{
     text-decoration:none;
     color: #12b7f5;
    }
    map{
        display:block;
        width: 100%;
        height: 600px;
    }
    section{
 height:300px;
     display: flex;
     align-items: center;
     justify-content: center;
    }
    section>img{
margin:0 50px;
    }
    nav{
        height:80px;
        width:100%;
        background-color:rgba(18,183,245,0.5);
    }
    video{width: 100%;}
    li{line-height: 80px;
        display:inline-block;
        padding: 0 30px;
        cursor: pointer;}
li:hover{
background-color:#12b7f5;
}
li>a{
text-decoration:none;
font-size:22px;
color:#fff;
}
nav img{
position:relative;
top:15px;
margin:0 50px;
    }
    footer{
        height:120px;
        background-color:#2a2a2a;
    }
    figure{
        width:1000px;
        margin: 0 auto;
        padding-top: 10px;
        color:#666;
        text-align:center;
    }
    </style>

</head>
<body>
<nav>
<a href=""><img src="14.png" alt=""></a>
      <li><a href="http://tecncial.oschina.io/bing-html">首页</a></li>
      <li><a href="http://tecncial.oschina.io/car">下载</a></li>
      <li><a href="https://user.qzone.qq.com/2245765878/infocenter?_t_=0.21103677323220404">动态</a></li>
</nav>
<header>
<img src="4.png" alt="">
<button>龙   猫</button></header>
<div>
    <span>
        乐·在·沟·通
    </span>
</div>
<article></article>
<main>
<img src="6.png" alt="">
<aside>
<h1>沟通，是跨越万水千山的亲切声音</h1>
<p>你都能自由享受QQ在各类终端上带来的高清通话，与好友一起想聊多久聊多久</p>
<p><a href="http://im.qq.com/" >了解更多</a></p>
</aside>
</main>
<map id="here"></map>
<section>
<img src="10.png" alt="">
<img src="11.png" alt="">
<img src="12.png" alt="">
<audio src="陈奕迅 - 1874.mp3"autoplay ></audio>
</section>
<video src="大鱼海棠.mp4"  autoplay controls></video>
<footer>
    <figure>
        <h6>Copyright ©Tencent All Rights Reserved.</h6>
        <h6>天眼公司  版权所有</h6>
    </figure>
    </footer>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023,34.3314);
    map.centerAndZoom(point, 25);
    window.map = map;
}
initMap();
</script>
</html>